<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <script src="../js/vue.js"></script>
    <style>
        li {
            line-height: 40px;
            text-indent: 16px;
            border: 1px dashed #333;
        }
    </style>
</head>

<body>
    <div id="app">

        <p>{{count}}</p>
        <p>
            <button @click="count++">count++</button>
        </p>
        <br>
        <br>

        <p>
            <button @click="addEle">新增</button>
            <button @click="delEle">删除</button>
        </p>

        <ul>
            <li v-for="(item,index) in list" :key="index">{{item}}</li>
        </ul>
        <!-- <div>list中的偶数: {{list.filter(v => v % 2 ==0 )}}</div> -->

        <!-- methods -->
        <!-- <div>list中的偶数: {{getEven()}}</div>
        <div>list中的偶数: {{getEven()}}</div>
        <div>list中的偶数: {{getEven()}}</div>
        <div>list中的偶数: {{getEven()}}</div>
        <div>list中的偶数: {{getEven()}}</div>
        <div>list中的偶数: {{getEven()}}</div> -->

        <div>list中的偶数: {{getOu}}</div>
        <div>list中的偶数: {{getOu}}</div>
        <div>list中的偶数: {{getOu}}</div>
        <div>list中的偶数: {{getOu}}</div>
        <div>list中的偶数: {{getOu}}</div>
        <div>list中的偶数: {{getOu}}</div>

        <br>
        <div>list中的偶数的个数: {{getOuLen}}</div>
        <div>getMsg: {{getMsg}}</div>

    </div>
</body>
<script>
    // 一般情况下,不建议v-for和v-if同时使用, 如果v-for和v-if同时使用 v-for的优先级高于v-if,先将元素重复n次,在逐个判断每个元素是否渲染

    // methods => 每次Vue在解析模版为虚拟DOM时,函数都会执行一次 => 得到函数的执行结果 => 放到模版中


    // 计算属性 (派生值/衍生值)
    // 可以依赖data中的一个或多个属性得到一个新值(派生值/衍生值), 如果依赖的数据没有发生改变,会一直使用缓存的结果,如果依赖的数据发生改变,会重新调用函数得到新的结果,并缓存

    // 计算属性是基于它的响应式依赖来进行缓存的

    // 计算属性
    // 1. 根据data中原有的属性得到的一个新属性(派生值/衍生值) 注意:计算属性也可以依赖于其他的计算属性
    // 2. 计算属性初始化阶段会默认执行一次,并缓存执行的结果(初始值)
    // 3. 计算属性依赖的数据发生改变, 会重新执行函数并缓存新的结果
    // 4. 如果计算属性中没有依赖的数据, 那么只会在初始化阶段执行一次,后续结果不在更改

    // 计算属性的变化是被动的 => 只有依赖的数据发生改变,计算属性才会改变 => 更注重其他数据改变,对自身造成的影响

    // 案例1:
    // 小计(新值) = 商品价格(依赖1) * 商品数量(依赖2)
    //                 250              2

    // 案例2:
    // 老板(收益) = 员工A + 员工B + 员工C


    var app = new Vue({
        el: "#app",
        data: {
            count: 1,
            list: [1, 4, 7, 2, 5, 8, 3, 6, 9],
        },
        methods: {
            addEle() {
                var num = Math.round(Math.random() * 20);
                console.log(num);
                var index = Math.floor(Math.random() * this.list.length);
                this.list.splice(index, 0, num);
            },
            delEle() {
                var index = Math.floor(Math.random() * this.list.length);
                this.list.splice(index, 1);
            },
            getEven: function () {
                console.log("getEven执行了");
                return this.list.filter(v => v % 2 == 0);
            }
        },
        // 计算属性
        computed: {
            // 键名  -> 计算属性名(getOu) -> 也会挂载到Vue实例中
            // 健值  -> 函数 => 此函数会在初始化阶段默认执行一次, 此时函数的返回值会作为计算属性的初始值,缓存结算的结果


            getOu: function () {
                console.log("getOu执行了");
                return this.list.filter(v => v % 2 == 0); // [2,8,4,6]
            },
            getOuLen: function () {
                console.log("getOuLen执行了");
                return this.getOu.length;
            },
            getMsg: function () {
                console.log("getMsg执行了");
                return "hello";
            },

        }
    })


</script>

</html>